<template>
  <div class="leftHome">
    <Dark />
    <!-- 头像 -->
    <div class="headerInfo">
      <img
        src="@/assets/toux.jpg"
        alt=""
      />
      <h2>仗剑走天涯</h2>
      <div class="artNum">
        <div>
          <span>文章</span>
          <span>{{ store.article?.length }}</span>
        </div>
        <div>
          <span>照片</span>
          <span>{{ store.imgUrl.length }}</span>
        </div>
      </div>
    </div>
    <!-- 签名 -->
    <div class="sign">
      <span>个人签名：</span>
      <p>人生苦短，行走在江湖，总有一些迷茫和失落。</p>
      <p>加油吧！少年</p>
    </div>
    <!-- 导航区域 -->
    <div class="navhome">
      <el-menu :default-active="data.currentMenu" class="el-menu-vertical-demo">
        <el-menu-item
          router
          v-for="(item, index) in data.navList"
          :key="index"
          @click="$router.push(item.path)"
          :index="item.pathName"
        >
          <svg class="icon" aria-hidden="true" :class="{iconbg:store.theme && index == 2}">
            <use :xlink:href="item.icon"></use>
          </svg>
          <!-- <el-icon><icon-menu /></el-icon> -->
          <span>{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="git">
      <div @click="handleOpen('https://github.com/lion-66')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-GitHub"></use>
        </svg>
        GitHub
      </div>
      <div @click="handleOpen('https://gitee.com/li-chuwei')">
        <img src="https://gitee.com//favicon.ico" alt="">
        Gitee
      </div>
    </div>
  </div>
</template>

<script setup>
import Dark from '@/components/dark.vue'
import { reactive, watch, onMounted } from "vue";
import {useRoute} from 'vue-router'
import { useHomeStore } from "@/stores/home.js";
const store = useHomeStore();
const route = useRoute()
const data = reactive({
  navList: [
    { name: "文章", path: "/home", icon: "#icon-shouye", pathName: 'home' },
    { name: "个人相册", path: "/myPhoto", icon: "#icon-xiangce", pathName: 'myPhoto' },
    { name: "留言板", path: "/myMessage", icon: "#icon-liuyanban-05", pathName: 'myMessage' },
    { name: "后台管理", path: "/management", icon: "#icon-houtaiguanli", pathName: 'management' },
  ],
  currentMenu: null
});
const handleOpen = url =>{
  window.open(url)
}
onMounted(() => {
  data.currentMenu = route.name
})
</script>

<style lang="scss" scoped>
.leftHome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .headerInfo {
    width: 90%;
    margin-top: 1rem;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    flex-flow: column;
    align-items: center;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin-bottom: 10px;
    }
    .artNum {
      display: flex;

      margin-top: 10px;
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        margin: 0 10px;
      }
    }
  }
  .sign {
    font-size: 15px;
    width: 200px;
    height: 120px;
    box-shadow: 
      0 4px 8px rgba(255, 255, 255, 0.1),
      0 8px 24px rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    margin: 10px 0;
    span:nth-child(1) {
      color: #ccc;
    }
    span:nth-child(2) {
      font-weight: 600;
    }
    p {
      font-size: 20x;
      font-weight: 600;
      color: orange;
      animation-name: example;
      animation-duration: 4s;
      animation-iteration-count: infinite;
    }
    @keyframes example {
      0% {
        color: orange;
      }
      50% {
        color: green;
      }
      100%{
        color: orange;
      }
    }
  }
  .navhome {
    .el-menu {
      border-right: none !important;
      span {
        font-size: 13px;
      }
      .el-menu-item {
        height: 40px;
        .icon {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
        .iconbg{
          fill: #fff;
        }
      }
      .el-menu-item:hover {
        --el-menu-hover-bg-color: transparent;
        background-color: var(--el-menu-hover-bg-color);
      }
    }
  }
  .git {
    cursor: pointer;
    width: 100px;
    height: 100px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .icon,img{
      width: 17px;
      height: 17px;
      margin-bottom: 5px;
    }
  }
}
</style>